a<template>
  <div class="EngineeringCost" chief-style-set>
    <Title title='工程成本对账' more  :MoreUrl='MoreJump(this, "Construction", 2)'></Title>
    <div class="content-h-auto" chief-style-set>
      <div class="content-top">
        <div class="left">
          <span class="name">目标成本签订情况</span>
        </div>
        <div class="right">
          <div class="right-item" v-for="item in targetList" :key="item.name">
            <div class="right-item-name">
              <span class="name">{{item.name}}</span>
            </div>
            <div class="right-item-value">
              <span class="name">{{item.value | toLocaleString}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="content-middle">
        <span class="name">产值完成情况</span>
      </div>

      <div class="content-bottom">
        <div>
          <div class="left">
            <span class="name">完成产值</span>
          </div>
          <div class="right">
            <div class="right-item" v-for="item in completeList" :key="item.name">
              <div class="right-item-name">
                <span class="name">{{item.name}}</span>
              </div>
              <div class="right-item-value">
                <span class="name">{{item.value | toLocaleString}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="left">
            <span class="name">基建行政费用</span>
          </div>
          <div class="right">
            <div class="right-item" v-for="item in administrativeList" :key="item.name">
              <div class="right-item-name">
                <span class="name">{{item.name}}</span>
              </div>
              <div class="right-item-value">
                <span class="name">{{item.value | toLocaleString}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import { rptVisPrjCostRec } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "BusinessIndicators",
  components: {
    Title
  },
  data () {
    return {
      targetList: [],
      completeList: [],
      administrativeList: [],
      MoreJump
    };
  },
  filters: {
    toLocaleString (n) {
      if (n) {
        return Number(n).toLocaleString();
      }
      return n;
    }
  },
  created () {
    rptVisPrjCostRec(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    disposeData (res) {
      if (res.status === 200) {
        let list = res.data.data;
        if (Object.keys(list).length > 0) {
          this.targetList = this.disposeObj(list["目标成本签订情况"]);
          this.completeList = this.disposeObj(list["完成产值"]);
          this.administrativeList = this.disposeObj(list["基建行政费用"]);
        }
      }
    },
    disposeObj (obj) {
      let output = [];
      Object.keys(obj).forEach(item => {
        output.push({
          name: item,
          value: obj[item]
        });
      });
      return output;
    }
  }
};
</script>

<style lang="less">
.EngineeringCost{
  .content-h-auto{
    display: flex;
    flex-direction: column;
    >div{
      display: flex;
    }
    .left{
      position: relative;
      width: 20%;
      .color();
      font-size: 1vw;
      padding-top: 5%;
      text-align: center;
      border-right: 1px solid #ddd;
      box-sizing: border-box;
    }
    .right{
      width: 80%;
      display: flex;
      .right-item{
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        >div{
          flex: 1;
          position: relative;
        }
      }
    }

    .name{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: inline-block;
      width: 100%;
      text-align: center;
    }

    .content-top{
      flex: 35%;
    }
    .content-middle{
      flex: 15%;
      font-size: 1vw;
      position: relative;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      .color();
    }
    .content-bottom{
      flex: 50%;
      display: flex;
      flex-direction: column;

      >div{
        flex: 1;
        display: flex;
        border-bottom: 1px solid #ddd;
      }

      .right-item-name{
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style>